<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 98%;
				border: 1px orange solid;
				border-collapse: collapse;
				margin: auto;
			}

			table th,
			td {
				border: 1px orange solid;
				padding: 10px;
			}

			a {
				text-decoration: none;
			}
		</style>
	</head>
	<!-- atl + 鼠标 -->
	<body>
		<table>
			<tr>
				<th>全选 <input type="checkbox" id="all" /></th>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>奔驰</td>
				<td>￥1000.00</td>
				<td><a href="#" class="dec">-</a><input type="text" value="1"><a href="#" class="inc">+</a></td>
				<td>￥1000.00</td>
				<td><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="check" /></td>
				<td>宝马</td>
				<td>￥1000.00</td>
				<td><a href="#" class="dec">-</a><input type="text" value="1"><a href="#" class="inc">+</a></td>
				<td>￥1000.00</td>
				<td><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td colspan="3" class="totalNum">已选0件商品</td>
				<td colspan="3" class="totalPrice">总价￥1000.00</td>
			</tr>
		</table>
		<script type="text/javascript">
			function total() {
				//获取所有类名是check的input节点对象
				const inputCheck = document.querySelectorAll(".check");
				//总购买数量
				let totalN = 0;
				//总金额
				let tatalP = 0;
				//val 类名是check的input节点对象的
				inputCheck.forEach(function(val) {
					//累加选中的
					if (val.checked) {
						// 类名是check的input节点对象的父
						const tdParent = val.parentElement;
						//td是购买数量input的父节点对象
						const td3N = tdParent.nextElementSibling.nextElementSibling
							.nextElementSibling;
						//td是购买数量input的父节点对象的所有孩子(数组)
						const td3Nchild = td3N.children;
						const input = td3Nchild[1];
						//购买数量
						let inputVal = input.value; //String
						inputVal = Number.parseInt(inputVal); //Number
						console.log("-----------------", inputVal);
						//累加所有勾选的商品数量
						totalN += inputVal
						//获取小计td的节点对象
						const td4N = td3N.nextElementSibling;
						let td4NValue = td4N.innerHTML; //Stirng ￥1000.00
						td4NValue = td4NValue.substring(1); //Stirng 1000.00
						//小计
						td4NValue = Number.parseInt(td4NValue); //Number 1000
						//累加所有勾选的商品小计
						tatalP += td4NValue;
					}
					//获取已选商品td节点对象
					const totalNum = document.querySelector(".totalNum");
					totalNum.innerHTML = `已选${totalN}件商品`;
					//获取总价节点对象
					const totalPrice = document.querySelector(".totalPrice");
					totalPrice.innerHTML = `总价${tatalP.toFixed(2)}`;

				})
			}
			window.addEventListener("DOMContentLoaded", () => {
				//----------------------手动修改购物数量---------------------
				const it = document.querySelectorAll("input");
				it.forEach(function(val) {
					val.addEventListener('change', function() {
						//-----------------------小计---------------------------------------------------
						//获取+节点对象的父(td)的上一个兄弟
						const tdParent = this.parentElement; //+节点对象的父(td)
						const tdParentPre = tdParent.previousElementSibling; //+节点对象的父(td)的上一个兄弟
						//获+节点对象的父(td)的上一个兄弟其值
						let tdParentPreVal = tdParentPre.innerHTML;
						//取￥后面的数字
						tdParentPreVal = tdParentPreVal.substring(1); //Stirng
						tdParentPreVal = Number.parseInt(tdParentPreVal); //Number
						//单价*数量=小计
						let sum = tdParentPreVal * Number.parseInt(this.value);
						// 获取小计td的DOM对象
						const tdParentNext = tdParent.nextElementSibling;
						//把小计设置到td中,保留2位小数
						tdParentNext.innerHTML = `￥${sum.toFixed(2)}`;
						//-----------------------总---------------------------------------------------
						total();
					})
				})


				//----------------------删除---------------------
				const del = document.querySelectorAll(".del");
				del.forEach(function(val) {
					//a注册事件
					val.addEventListener('click', function(e) {
						e.preventDefault(); //阻止默认行为
						const td = this.parentElement;
						const tr = td.parentElement;
						const table = tr.parentElement;
						table.removeChild(tr);
						total();
					})
				})


				//----------------------实现全选---------------------
				const checkAll = document.querySelector("#all");
				checkAll.addEventListener('click', () => {
					//获取所有checkbox节点对象(数组)
					const check = document.querySelectorAll(".check");
					//遍历
					check.forEach(val => {
						val.checked = checkAll.checked; //false
					})
					//计算总数量，总价
					total();
				});
				//----------------------实现+---------------------

				//获取所有+节点对象(数组)
				const inc = document.querySelectorAll(".inc");
				//遍历(注册事件)
				inc.forEach(function(val) {
					//val就是a标签对于的DOM对象
					val.addEventListener('click', function(e) {
						e.preventDefault(); //阻止默认行为
						//-------------------购买数量++-----------------------------------------------
						//上一个兄弟
						const input = this.previousElementSibling;
						//上一个兄弟的值
						let val = input.value; //Stirng
						val = Number.parseInt(val); //Number
						val++;
						//赋值给input节点对象
						input.value = val;
						//-----------------------小计---------------------------------------------------
						//获取+节点对象的父(td)的上一个兄弟
						const tdParent = input.parentElement; //+节点对象的父(td)
						const tdParentPre = tdParent.previousElementSibling; //+节点对象的父(td)的上一个兄弟
						//获+节点对象的父(td)的上一个兄弟其值
						let tdParentPreVal = tdParentPre.innerHTML;
						//取￥后面的数字
						tdParentPreVal = tdParentPreVal.substring(1); //Stirng
						tdParentPreVal = Number.parseInt(tdParentPreVal); //Number
						//单价*数量=小计
						let sum = tdParentPreVal * Number.parseInt(input.value);
						// 获取小计td的DOM对象
						const tdParentNext = tdParent.nextElementSibling;
						//把小计设置到td中,保留2位小数
						tdParentNext.innerHTML = `￥${sum.toFixed(2)}`;

						//计算总价，总数量
						total();
					})

				});

				//----------------------选中修改已选商品，总价---------------------

				//获取所有类名是check的input节点对象（数组）
				const check = document.querySelectorAll(".check");
				check.forEach(function(val) {
					// val 类名是check的input节点对象
					val.addEventListener('click', function() {
						total();
					})
				})
				/* check.forEach(function(val) {
					// val 类名是check的input节点对象
					val.addEventListener('click', function() {
						// 类名是check的input节点对象的父
						const tdParent = this.parentElement;
						//td是购买数量input的父节点对象
						const td3N = tdParent.nextElementSibling.nextElementSibling.nextElementSibling;
						//td是购买数量input的父节点对象的所有孩子(数组)
						const td3Nchild = td3N.children;
						const input = td3Nchild[1];
						//购买数量
						let inputVal = input.value; //String
						inputVal = Number.parseInt(inputVal); //Number
						//累加所有勾选的商品数量
						totalN += inputVal
						//获取小计td的节点对象
						const td4N = td3N.nextElementSibling;
						let td4NValue = td4N.innerHTML; //Stirng ￥1000.00
						td4NValue = td4NValue.substring(1); //Stirng 1000.00
						//小计
						td4NValue = Number.parseInt(td4NValue); //Number 1000
						//累加所有勾选的商品小计
						tatalP += td4NValue;
						//获取已选商品td节点对象
						const totalNum = document.querySelector(".totalNum");
						totalNum.innerHTML = `已选${totalN}件商品`;
						//获取总价节点对象
						const totalPrice = document.querySelector(".totalPrice");
						totalPrice.innerHTML = `总价${tatalP.toFixed(2)}`;
					})
				}) */
			})
		</script>
	</body>
</html>
